<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>读者未还图书</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <jsp:include page="/WEB-INF/common/header.jsp" flush="true"/>

  <div style="padding: 20px;"></div>
  <!-- 搜索条件表单 -->
  <div class="demoTable layui-form">
    <div class="layui-inline">
      <input class="layui-input" name="bookName" id="bookName" autocomplete="off" placeholder="请输入书名">
    </div>
    <div class="layui-inline">
      <input class="layui-input" name="readerName" id="readerName" autocomplete="off" placeholder="请输入读者">
    </div>
    <div class="layui-inline">
      <div class="layui-input-block">
        <select name="state" id="state">
          <option value="">请选择归还状态</option>
          <option value="2">未还</option>
          <option value="1">已还</option>
        </select>
      </div>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
  </div>
  <%--    <a  style="margin-left: 70px" class="layui-btn layui-btn-normal" onclick="add();">添加图书</a>--%>
</div>

<table class="layui-hide" id="demo" lay-filter="action"></table>

<div class="layui-tab-item layui-show">
  <div id="pageDemo"></div>
</div>
<script type="text/html" id="barDemo">
  {{#  if(d.state =="2"){ }}
  <a class="layui-btn layui-btn-normal backBook" lay-event="backBook">确认归还</a>
  {{#  } }}
  {{#  if(d.state =="1"){ }}
  <button class="layui-btn  lend layui-btn-disabled backBook" lay-event="lend" disabled="disabled">已归还</button>
  {{#  } }}
</script>
<div id="testDiv"></div>

</body>

<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript">

	layui.use(['layer', 'jquery', 'form', 'table', 'element'], function () {
		let element = layui.element;
		let layer = layui.layer;
		let $ = layui.jquery;
		let table = layui.table;
		let form = layui.form;
		// 导航栏初始化
		element.init();

		// 执行一个table实例
		table.render({
			elem: '#demo',
			height: 550,
			url: '${pageContext.request.contextPath}/lend/lendList',
			title: '图书表',
			method: 'POST',
			dataType: 'json',
			page: true,
			limit: 5,
			limits: [5, 10, 15, 20],
			parseData: function (res) {
				return {
					'code': res.code,
					'data': res.data.data,
					'msg': res.message,
					'count': res.count
				}
			},
			cols: [
				// 表头实例
				[
					{type: 'checkbox', fixed: 'left'},
          {field: 'id', title: 'id'}
					, {field: 'readerId', title: '借阅号', width: 150, sort: true}
					, {field: 'readerName', title: '借阅人', width: 150}
					, {field: 'bookName', title: '书名', width: 200}
					, {field: 'lendDate', title: '借阅时间', width: 200, sort: true}
					, {field: 'backDate', title: '最晚归还时间', width: 200}
					, {
					field: 'fine', title: '罚款（￥）', width: 150, templet: function (data) {
						return data.fine === "0.0" ? '' : '<a style="font-size:1.5em;color: red;font-weight: bold">' + data.fine + '元</a>';
					}
				}
					, {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
				]
			],
      done(res, curr, count){
        $("[data-field='id']").css('display', 'none');
      },
			// 检索结果重载
			id: 'lendCondition'
		})

		// 搜索条件处理
		let active = {
			reload: function () {
				let bookName = $('#bookName');
				let readerName = $('#readerName');
				let state = $('#state');
				// 执行重载
				table.reload('lendCondition', {
					method: 'POST',
					page: {
						curr: 1
					},
					where: {
						bookName: bookName.val(),
						readerName: readerName.val(),
						state: state.val()
					}
				})
			}
		}


		// 条件检索监听
		$('.demoTable .layui-btn').on('click', function () {
			let type = $(this).data('type');
			active[type] ? active[type].call(this) : ''
		})


		// 确认归还监听
		table.on('tool(action)', function (obj) {
			// 行数据
			let data = obj.data;
			// 行事件
			let event = obj.event;

			// 判断事件
			if (event === 'backBook') {
				layer.confirm("确认归还吗？", function (index) {
					$.ajax({
						url: '${pageContext.request.contextPath}/lend/backBook',
						data: {id: data.id},
						dataType: 'json',
						method: 'POST',
						success: function (res) {
							// 确认归还，则将按钮置为禁用
							if (res.success) {
								// 当前行
								let currentCol = $("tr").index(obj.tr) - 1;
								let dom = $('.backBook').eq(currentCol);
								if (dom.hasClass('layui-btn-normal')) {
									// 移除旧class
									dom.removeAttr('layui-btn-normal');
									// add禁用的lass
									dom.addClass('layui-btn-disabled');
									// 除去事件
									dom.attr('lay-event', '');
									dom.attr('disabled', 'disabled');
									dom.html('已归还');
								}
								layer.close(index);
							} else {
								layer.msg(res.message);
							}
						}
					})
				})
			}
		})


	})

</script>
</html>
